<template>
  <div class="modal-form-container" style="height: 600px">
    <vuescroll :ops="ops">
      <Form ref="info" :model="data" :rules="rules" :label-width="100" inline>
        <FormItem v-for="form in forms" :key="form.id" :label="form.label">
          <Select v-model="data[form.key]">
            <Option v-for="rate in rates" :key="rate.value" :value="rate.value" >{{ rate.label }}</Option>
          </Select>
        </FormItem>
        <FormItem :label="$t('GOyVw5KDNjPYNc3iTInwM')" prop="cuspelectprice">
          <Input v-model="data.cuspelectprice" />
        </FormItem>
        <FormItem :label="$t('W6-ija9Ek-NImMawsVVzD')" prop="cuspserviceprice">
          <Input v-model="data.cuspserviceprice" />
        </FormItem>
        <FormItem :label="$t('f14eocGEC66smOTM3Ksd8')" prop="peakelectprice">
          <Input v-model="data.peakelectprice" />
        </FormItem>
        <FormItem :label="$t('VqSgOOoTo2f9K6dY66Pts')" prop="peakserviceprice">
          <Input v-model="data.peakserviceprice" />
        </FormItem>
        <FormItem :label="$t('VxULpcsWvjyao-8oC4pyv')" prop="flatelectprice">
          <Input v-model="data.flatelectprice" />
        </FormItem>
        <FormItem :label="$t('Gf9xSuznsUiCuEZYlINz5')" prop="flatserviceprice">
          <Input v-model="data.flatserviceprice" />
        </FormItem>
        <FormItem :label="$t('UAZ_291mYGGDLDUrBdX8R')" prop="valleyelectprice">
          <Input v-model="data.valleyelectprice" />
        </FormItem>
        <FormItem :label="$t('kWpqTUh7cQRHY2LC8TF1j')" prop="valleyserviceprice">
          <Input v-model="data.valleyserviceprice" />
        </FormItem>
        <FormItem style="display: block;">
          <Button style="margin-right: 20px;" type="primary" @click="save">{{ status == 'create' ? $t('VhwkQ6PY9jwrMnJ2Qccvv') : $t('q-FETLOZVSMbWnrNq0vj6') }}</Button>
          <Button type="warning" @click="sys">{{$t('OHtqFpyC3wUqZ7eYl7ydn')}}</Button>
        </FormItem>
      </Form>
    </vuescroll>
  </div>
</template>

<script>
import vuescroll from 'vuescroll'
import { addStationPrice, updateStationPrice, deleteStationPrice, sysStationPrice } from '@/api/data2'

const generatePiece = (h, m) => {
  return (h < 10 ? '0' + h : h) + ':' + (m == 0 ? '00' : '30')
}

const generateTime = (i) => {
  const sh = Math.floor(i / 2)
  const sm = i % 2
  const eh = Math.floor((i + 1) / 2)
  const em = (i + 1) % 2
  const start = generatePiece(sh, sm)
  const end = generatePiece(eh, em)
  return start + '~' + end
}

export default {
  name: 'station_form_info',
  components: {
    vuescroll
  },
  props: {
    data: Object,
    status: String
  },
  data () {
    return {
      ops: {
        scrollPanel: {
          maxHeight: 500
        }
      },
      rates: [{
        value: '0',
        label: '尖'
      }, {
        value: '1',
        label: '峰'
      }, {
        value: '2',
        label: '平'
      }, {
        value: '3',
        label: '谷'
      }],
      forms: Array.from({ length: 48 }).map((v, i) => (
        {
          id: i < 10 ? '0' + i : i,
          key: 'rate' + (i < 10 ? '0' + i : i),
          label: generateTime(i)
        }
      )),
      rules: {
        cuspelectprice: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
        cuspserviceprice: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
        peakelectprice: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
        peakserviceprice: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
        flatelectprice: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
        flatserviceprice: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
        valleyelectprice: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
        valleyserviceprice: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }]
      }

    }
  },
  mounted () {

  },
  methods: {
    transfrom (data) {
      const obj = {}
      _.forEach(data, (v, k) => {
        obj[k] = +v
      })
      return obj
    },
    async save () {
      this.$refs.info.validate(async valid => {
        if (valid) {
          const data = this.transfrom(this.data)
          const { code, desc } = this.status === 'create' ? await addStationPrice({ ...data }) : await updateStationPrice({ ...data })
          if (code == 200) {
            this.$Message.success(desc || '更新成功')
          } else {
            this.$Message.error(desc)
          }
          this.$emit('save')
        } else {
          this.$Message.error(this.$t('fcmS3YBVNyvO3V68Qt3xl'))
        }
      })
    },
    async del () {
      this.$Modal.confirm({
        title: this.$t('oiW2WYZoyJSt3j7yCy10e'),
        content: this.$t('KePcPzUJR7hEB6lp4nEtV'),
        onOk: async () => {
          // this.data.splice(index, 1)
          const { code, desc } = await deleteStationPrice({
            stationid: this.$store.state.user.stationId
          })
          if (code == 200) {
            this.$Message.success(this.$t('hWGIgDqZtmSWFd9gU3Ya7'))
          } else {
            this.$Message.error(desc)
          }
          this.$emit('del')
        }
      })
    },
    async sys () {
      const { code, data, desc } = await sysStationPrice({
        stationid: this.$store.state.user.stationId
      })
      if (code == 200) {
        this.$Message.success(desc)
      } else {
        this.$Message.error(desc)
      }
    }
  }
}
</script>
